{%if !empty($article)%}
<h2>{%$article->title%}</h2>
<i>{%$article->sdate%}</i>
<div style="border:1px solid #800;">
   {%if $article->pics(1)%}
   <img src="{%$article->pics('1|src')%}" {%$article->pics('1|3')%} alt="{%$article->title|strip_tags|escape:'html'%}" align="left" />
   {%/if%}
   {%$article->description%}
</div>
{%$article->body%}

{%assign var='gallery' value=$article->gallery()%}

{%if $gallery|@count > 0%}
<div style="border:1px solid #070; clear: both;">
   {%foreach from=$gallery item='img'%}
   {%if $img->image(0)%}<img src="{%$img->image('0|src')%}" {%$img->image('0|3')%} />{%/if%}<br />
   {%$img->title%}<br /><br />
   {%/foreach%}
</div>
{%/if%}

{%if $CONFIG->comments('enabled')%}

Total comments: <b>{%$article->countComments%}</b><br />

<div id="comment_form" style="border:1px solid #F63;{%if $CONFIG->cm_authority && !$authorizedUser%}display:none;{%/if%}">
   <form action="" method="post">
      <input type="hidden" name="f[aid]" value="{%$article->id|default:$request[$rlength]%}" />
      {%if !$CONFIG->cm_authority%}
      <div id="anonymouse_comments">
         
      </div>
      {%/if%}
      <table width="100%" border="0" cellpadding="5" cellspacing="0">
         <tr><td><label>Message:</label></td><td><textarea cols="40" rows="10" name="f[message]"></textarea></td></tr>
         <tr><td></td><td><input type="button" name="commit" onclick="addComment(this);" value=" Comment " /></td></tr>
      </table>
   </form>
</div>

{%if $CONFIG->cm_authority && !$authorizedUser%}
<div id="auth_suggest">
   Be authorized:<br />
   <a href="" onclick="$('#login_form').toggle(); return false;">Log-in</a>
   <div style="position: relative;">
      <div id="login_form" style="position: absolute; background-color: #FFF; border: 1px solid #CCC; padding: 10px; text-align: right; left: 70px; top: -30px; display: none;">
         <label for="aj_login">Login:</label> <input type="text" name="aj_login" id="aj_login" /><br /><br />
         <label for="aj_pwd">Password:</label> <input type="password" name="aj_pwd" id="aj_pwd" /><br /><br />
         <input type="button" value=" Log-in " onclick="loginUser();" />
      </div>
   </div>
</div>
{%/if%}

<div id="comments_block"></div>

<script type="text/javascript">
   function loginUser()
   {
      $.post(
         "{%$categories[15]->url%}auth",
         {"f[login]":$('#aj_login').val(), "f[pwd]":$('#aj_pwd').val(),'ajax':1},
         function(r){
            if(r)
            {
               $('#auth_suggest, #anonymouse_comments').hide();
               $('#comment_form').show();
            }
         },
         'json'
      );
      $('#login_form').hide();
   }

   function addComment(el)
   {
      while(el.tagName != 'FORM') el = el.parentNode;
      $.post(
         "{%$categories[15]->url%}add",
         $(el).serialize(),
         processRespond,
         'json'
      );
   }

   function getComments()
   {
      $.get(
         "{%$categories[15]->url%}get",
         {id:"{%$article->id%}"},
         processRespond,
         'json'
      );
   }

   function processRespond(r)
   {
      if(r)
      {
         html = drowCommentsHTML(r);
         $('#comments_block').html(html);
      }
   }
   function drowCommentsHTML(comments)
   {
      html = '';
      if(typeof comments != 'object') return html;
      html += '<ul>';
      for(var x in comments)
      {
         html += '<li>';
         html += '<hr />'
         if(comments[x].user && comments[x].user.images)
         {
            img = comments[x].user.images[0];
            html += '<img src="'+img.src+'" '+img[3]+' /> ';
         }
         html += '<b>'+ comments[x].cdate +'</b><br />';
         if(comments[x].user) html += '<i>'+ comments[x].user.name +'</i><br />';
         html += comments[x].comment +'<br />';
         html += '<a href="" data-id="'+ comments[x].id +'">Ответить</a><br />';
         if(typeof comments[x].comments == 'object') html += drowCommentsHTML(comments[x].comments);
         html += '</li>';
      }
      html += '</ul>';
      return html;
   }

   $(document).ready(function(){
      $('#comments_block a').live('click', function(){
         var p = $(this).offset();
         console.log(p);
         $(this)
            .after('<div style="border: 1px dotted #933;background-color:#FFF;position:absolute;left:'+Math.round(p.left+30)+'px;top:'+Math.round(p.top+20)+'px;">'+ $('#comment_form').html() +'</div>')
            .next()
            .find('form')
            .append('<input type="hidden" name="f[pcid]" value="'+ $(this).data('id') +'" />');
         return false;
      });
      getComments();
   });
</script>

{%/if%}
{%/if%}

{%assign var='abinds' value=$article->bind('right')%}